// 检测页面是否缩放
(function(window, $, undefined) {

	function DetectZoom() {
		this.body = $('body');
		this.pop = $('<div id="window-screen-pop" style="display:none;"><div class="screen-pop-close" style="position: absolute;top: 4%;right: 4%;cursor: pointer;width: 22px;height: 22px;"></div><div class="screen-pop-cont"><h4 style="font-size: 24px;padding-bottom: 20px;">页面缩放不正确</h4><p>这可能会影响页面的正常浏览，</p><p>请尝试使用<span style="background: #2d78f4;color: #fff;padding: 3px 8px;border-radius: 4px;margin: 0 6px; ">ctrl</span>+<span style="background: #2d78f4;color: #fff;padding: 3px 8px;border-radius: 4px;margin: 0 6px;">0</span>将页面缩放恢复至100％。</p></div></div>');

		this.screen = window.screen;
		this.outerWidth = window.outerWidth;
		this.deviceXDPI = screen.deviceXDPI;
		this.ua = navigator.userAgent.toLowerCase();
		this.isIE = ~this.ua.indexOf('msie') && this.deviceXDPI;
		this.type = this.checkType();
		this.methods = {
			devicePixelRatio: function() {
				return window.devicePixelRatio;
			},
			logicalXDPI: function() {
				return this.deviceXDPI / this.screen.logicalXDP
			},
			innerWidth: function() {
				return this.outerWidth / window.innerWidth
			},
		};
		this.timer = null;

		this.mousewheel();
		this.keydown();
		this.setRatio();
		this.body.append(this.pop);
		this.pop.css({
			'margin-left': -this.pop.outerWidth(true) * 0.5,
			'margin-top': -this.pop.outerHeight(true) * 0.5
		});
		this.closePop();
		
	}


	// 通过提前判定需要使用的属性，避免重复判断 
	DetectZoom.prototype.checkType = function() {
		if (window.devicePixelRatio) {
			return 'devicePixelRatio';
		}
		if (this.isIE && this.screen.logicalXDPI) {
			return 'logicalXDPI';
		}
		if (this.outerWidth && window.innerWidth) {
			return 'innerWidth';
		}
	};
	DetectZoom.prototype.closePop = function() {
		var that = this;
		that.pop.find('.screen-pop-close').click(function() {
			that.pop.hide();
			that.pop.css('display','none');
		});
	};
	// 键盘ctrl+0时关闭弹窗
	$(window).keydown(function(e) {
		if (event.ctrlKey == 1) {
			if (document.all) {
				k = e.keyCode
			} else {
				k = e.which
			};
			if (k == 48) {
				$('#window-screen-pop').css('display','none');
			};
			if (k == 96) {
				$('#window-screen-pop').css('display','none');
			};
		}
	});
	

	DetectZoom.prototype.getRatio = function() {
		return this.methods[this.type]();
	};


	DetectZoom.prototype.setRatio = function() {
		var that = this;
		var browser = {
			versions: function() {
				var u = navigator.userAgent,
					app = navigator.appVersion;
				return { //移动终端浏览器版本信息
					mobile: !!u.match(/AppleWebKit.*Mobile.*/),
					Mac : u.indexOf("Mac OS X")>0,
					Window : u.indexOf("Window")>0
				};
			}(),
			language: (navigator.browserLanguage || navigator.language).toLowerCase()
		}
		setTimeout(function() {
			that.body.attr('zoom', that.getRatio() === 1 ? '' : 'scale');
			if (that.getRatio() !== 1 && !browser.versions.mobile && !browser.versions.Mac) {
				that.pop.css('display','block');
			} else {
				that.pop.css('display','none');
			}
		}, 0);
	};


	// 因为鼠标滚轮和按键操作都是频繁触发的，应该降低触发处理函数的频率
	DetectZoom.prototype.debounce = function(time, func) {
		var that = this,
			args = arguments;
		clearTimeout(that.timer);
		that.timer = setTimeout(function() {
			func.call(that);
		}, time);
	};

	DetectZoom.prototype.mousewheel = function() {
		var that = this;
		$(document).on('mousewheel DOMMouseScroll', function(e) {
			if (e.ctrlKey) {
				that.debounce(200, that.setRatio);
			}
		})
	};

	DetectZoom.prototype.keydown = function() {
		var that = this;
		$(document).on('keydown', function(e) {
			if (e.ctrlKey) {
				switch (e.which) {
					case 48:
						/*0*/
					case 96:
						/*0*/
					case 187:
						/*+*/
					case 189:
						that.debounce(200, that.setRatio);
						break;
				}
			}
		})
	};

	new DetectZoom();



}(window, window.jQuery))

